import 'package:flutter/material.dart';

/// appbar
///
enum SearchBarType { home, normal, homeLeft } // 三种状态的navbar

class SearchBar extends StatefulWidget {
  final bool enabled;
  final bool hideLeft;
  final SearchBarType searchBarType;
  final String hint;
  final String defaultText;
  final void Function() leftButtonClick;
  final void Function() rightButtonClick;
  final void Function() speakClick;
  final void Function() inputBoxClick;
  final ValueChanged<String> onChanged; // input的数据变化 保存

  const SearchBar(
      {Key key,
      this.enabled,
      this.hideLeft,
      this.searchBarType,
      this.hint,
      this.defaultText,
      this.leftButtonClick,
      this.rightButtonClick,
      this.speakClick,
      this.inputBoxClick,
      this.onChanged})
      : super(key: key);

  @override
  _SearchBarState createState() => _SearchBarState();
}

class _SearchBarState extends State<SearchBar> {
  bool showClear = false;

  // 输入框的控制器
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    // 初始化的时候设置输入框的默认搜索信息
    if (widget.defaultText != null) {
      setState(() {
        _controller.text = widget.defaultText;
      });
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // 判断是不是首页的搜索框
    return widget.searchBarType == SearchBarType.home
        ? _getHomeSearch()
        : _getNormalSearch();
  }

  // 正常的搜索导航栏
  _getNormalSearch() {
    return Container(
      child: Row(
        children: <Widget>[
          _wrapTab(
              Container(
                padding: EdgeInsets.fromLTRB(6, 5, 10, 5),
                child: widget?.hideLeft ?? false
                    ? null
                    : Icon(
                        Icons.arrow_back_ios,
                        size: 26,
                        color: Colors.grey,
                      ),
              ),
              widget.leftButtonClick
          ),
          Expanded(
            flex: 1,
            child: _inputBox(),
          ),
          _wrapTab(
              Container(
                padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
                child: Text(
                  '搜索',
                  style: TextStyle(color: Colors.blue, fontSize: 17),
                ),
              ),
              widget.rightButtonClick
          )
        ],
      ),
    );
  }

  // 首页的搜索导航栏
  _getHomeSearch() {
    return Container(
      child: Row(
        children: <Widget>[
          Text(
            '上海',
            style: TextStyle(fontSize: 17, color: _homeFontColor()),
          ),
          Expanded(
            flex: 1,
            child: _inputBox(),
          ),
          _wrapTab(
              Container(
                padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
                child: Icon(
                  Icons.comment,
                  size: 26,
                  color: _homeFontColor(),
                ),
              ),
              widget.rightButtonClick
          )
        ],
      ),
    );
  }

  // 输入框
  _inputBox() {
    Color inputBoxColor;
    if (widget.searchBarType == SearchBarType.home) {
      inputBoxColor = Colors.white;
    } else {
      inputBoxColor = Color(int.parse('0xffEDEDED'));
    }
    return Container(
      height: 30,
      decoration: BoxDecoration(
        color: inputBoxColor,
        borderRadius: BorderRadius.circular(
            widget.searchBarType == SearchBarType.home ? 5 : 15
        ),
      ),
      child: Row(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
            child: Icon(
              Icons.search,
              size: 20,
              color: widget.searchBarType == SearchBarType.normal
                  ? Color(0xffA9A9A9)
                  : Colors.blue,
            ),
          ),
          Expanded(
            flex: 1,
            child: widget.searchBarType == SearchBarType.normal
                ? TextField(
                    controller: _controller,
                    autofocus: true,
                    onChanged: _onChanged,
                    style: TextStyle(
                        fontSize: 18.0,
                        textBaseline: TextBaseline.alphabetic,
                        fontWeight: FontWeight.w300,
                        color: Colors.black),
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                        hintText: widget.hint ?? '',
                        hintStyle: TextStyle(fontSize: 15)),
                  )
                : _wrapTab(
                    Container(
                      child: Text(
                        widget.defaultText,
                        style: TextStyle(color: Colors.grey, fontSize: 13),
                      ),
                    ),
                widget.inputBoxClick
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
            child: showClear
                ? _wrapTab(
                Icon(
                  Icons.clear,
                  size: 22,
                  color: Colors.grey,
                ), () {
              setState(() {
                _controller.clear();
              });
            })
              : _wrapTab(
                Icon(
                  Icons.mic,
                  size: 22,
                  color: Colors.grey,
                ),
                widget.speakClick
            ),
          )
        ],
      ),
    );
  }

  // 传入组件和点击事件,返回整体的工厂函数
  _wrapTab(Widget child, void Function() cb) {
    return GestureDetector(
      onTap: () {
        if (cb != null) cb();
      },
      child: child,
    );
  }

  _homeFontColor() {
    return widget.searchBarType == SearchBarType.homeLeft
        ? Colors.black54
        : Colors.white;
  }

  _onChanged(String text) {
    if (text.length > 0) {
      setState(() {
        showClear = true;
      });
    } else {
      setState(() {
        showClear = false;
      });
    }
    if (widget.onChanged != null) {
      widget.onChanged(text);
    }
  }
}
